
import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import classNames from 'classnames';

interface Props {
  className?: string;
  title?: string;
  data: Array<unknown>
}

export default function AngleChart<Props>(props: Props) {
  const domRef = useRef(null);


  const initChart = () => {
    const chart = echarts.init(domRef.current, 'purple');

    const dataArr = 30
    const pieNum = (dataArr * 100) / 360
    const colorSet = {
      color: 'rgba(59,191,253,1)',
    }

    chart.setOption({
      series: [
        {
           name: '内部进度条',
           type: 'gauge',
           radius: '80%',
           startAngle: 90, // 仪表盘起始角度
           endAngle: 450, // 仪表盘结束角度（0度代表正上方）
           min: 0,
           max: 360,
           // detail: {show: false},
           splitNumber: 4,
           splitLine: {
              show: true,
              distance: 0,
              length: 8,
              lineStyle: {
                 color: 'rgba(59,191,253,1)', //用颜色渐变函数不起作用
                 width: 2,
              },
           },
           axisLine: {
              lineStyle: {
                 color: [
                    [dataArr / 360, colorSet.color],
                    [1, colorSet.color],
                 ],
                 width: 2,
              },
           }, //仪表盘轴线
           axisLabel: {
              show: false,
              color: '#ffffff',
              fontSize: 14,
              fontWeight: 'bold',
              distance: -45,
           }, //刻度标签。
           //          axisLabel: {
           //     show: true,
           //     distance: 20,
           //     formatter: function (value) {
           //         return value;
           //     },
           //     textStyle: {
           //         color: '#fff',
           //         fontSize: 15
           //     }
           // },
           axisTick: {
              show: false,
           },
           itemStyle: {
              color: '#ffffff',
           },
           detail: {
              show: false,
              formatter: function (value) {
                 if (value !== 0) {
                    var num = Math.round(value)
                    return parseInt(num).toFixed(0) + '°'
                 } else {
                    return 0
                 }
              },
              offsetCenter: ['0', '90%'],
  
              fontSize: 16,
              fontWeight: '700',
              color: '#ffffff',
           },
           title: {
              show: true,
              offsetCenter: [0, '100%'],
  
              color: '#fff',
              fontSize: 12, //表盘上的标题文字大小
              fontWeight: 400,
           },
           data: [
              {
                 value: dataArr,
              
              },
           ],
           pointer: {
              show: true,
              length: '80%',
              width: "80%",
              icon: 'path://M700.065799 373.027761q116.507301 104.243374 209.508743 189.068865 39.857761 35.769785 77.671534 71.028574t67.451595 63.36362 47.522715 47.011718 17.884893 21.972868l0 61.319632q0 4.087975-17.884893-1.532991t-47.522715-17.373896-67.451595-27.593834-77.671534-33.214801q-93.001442-40.879755-209.508743-95.04543l0 193.156841q26.571841 19.417883 50.077699 37.813773 20.439877 15.329908 40.879755 30.148819t31.68181 22.994862q13.28592 9.197945 15.329908 18.906887t2.043988 22.994862l0 34.747791q0 8.175951-16.862899 10.730936t-40.368758-8.686948q-11.241933-6.131963-40.879755-18.39589t-63.36362-26.571841-64.896611-26.571841-46.500721-18.39589q-2.043988 0-3.576979-0.510997t-3.576979-0.510997-3.576979 0.510997-3.576979 0.510997q-15.329908 6.131963-46.500721 18.39589t-64.896611 26.571841-63.36362 26.571841-40.879755 18.39589q-23.505859 11.241933-40.368758 8.686948t-16.862899-10.730936l0-34.747791q0-13.28592 2.043988-22.994862t15.329908-18.906887q11.241933-8.175951 31.68181-22.994862t40.879755-30.148819q23.505859-18.39589 50.077699-37.813773l0-193.156841q-117.529295 54.165675-210.530737 95.04543-39.857761 17.373896-77.160537 33.214801t-66.940598 27.593834-47.522715 17.373896-17.884893 1.532991l0-61.319632q0-3.065982 17.884893-21.972868t47.522715-47.011718 66.940598-63.36362 77.160537-71.028574q93.001442-84.825491 210.530737-189.068865l0-231.992608q0-34.747791 10.219939-58.764647t25.549847-39.346764 33.214801-23.505859 33.725798-12.263926 26.060844-4.598972 11.241933-0.510997l10.219939 0q11.241933 1.021994 27.082837 5.109969t33.725798 12.263926 33.214801 23.505859 25.549847 39.346764 10.219939 58.764647l0 231.992608z',
              offsetCenter: [0, "40%"] // 修改偏移中心点为[0, 0]
           },
  
           animationDuration: 1000,
           z: 8,
        },
        
       
  
     
       
     ],
    });
    window.addEventListener('resize', function () {
      chart.resize();
    });

  }


  const className = classNames('size-full', props.className)

  useEffect(() => {
    initChart();
  }, [])

  return (
    <div ref={domRef} className={className}></div>
  );
}
